<template>
  <div class="moveNodeDialog">
    <dialogPublic
      title="选择移动至某节点（只能选一个节点）"
      :show.sync="showDialong"
      @doSubmit="doSave"
      @doClose="doClose"
      appendTobody
      width="30%"
      height="600px"
      class="moveNodeSelecet"
    >
      <div class="topSelect">
        <div class="topLabel">移动到目标节点的位置：</div>
        <div class="selectDiv">
          <el-select v-model="location">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="treeDiv">
        <customTree
          ref="equipTree"
          :currentNode="currentNode"
          moveNode
          :checkedKeys="[currentNode.id]"
          :optionalNum="optionalNum"
          :draggable="false"
          nodeKey="id"
          showCheckbox
          checkStrictly
        ></customTree>

        <!-- <editTree
          ref="nodeTree"
          v-if="showTree"
          :treeSetting="treeSetting"
          :hideBtn="hideBtn"
          :showCheckbox="showCheckbox"
          :checkStrictly="showCheckbox"
          :haveRemark="haveRemark"
          :optionalNum="optionalNum"
        />-->
      </div>
    </dialogPublic>
  </div>
</template>

<script>
import customTree from "../customTree";
import { lazyClassifyTree } from "@/api/equipmentLedger/equipmentManage";
export default {
  components: { customTree },
  props: {
    currentNode: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    formData: {
      handler: function(val) {
        this.treeSetting.treeData = val;
      },
      deep: true
    }
  },
  name: "editDialog",
  data() {
    return {
      optionalNum: 2,
      showDialong: false,
      haveRemark: true,
      showCheckbox: true,
      showTree: false,
      hideBtn: true,
      options: [
        {
          value: "0",
          label: "子节点"
        },
        {
          value: "1",
          label: "上方"
        },
        {
          value: "-1",
          label: "下方"
        }
      ],
      location: "0",
      treeData: [
        {
          id: "",
          name: "根节点",
          children: []
        }
      ],
      treeSetting: {
        data: [],
        defaultProps: {
          children: "children",
          label: "name"
        },
        clickExpand: true, //是否点击节点展开
        expandAll: true //展开所有节点
      }
    };
  },
  created() {
    //this.init();
  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.$refs.equipTree.setDefaultNode(this.currentNode);
        this.$refs.equipTree.expandTreeNode(this.currentNode);
      });
    },
    //获取设备树
    getTreeData() {
      // this.$refs.equipTree.expandTreeNode(this.currentNode);
      // deviceTree().then(res => {
      //   this.treeData[0].children = res.data;
      //   this.setDisabledNode(this.treeData);
      //   this.treeSetting.data = this.treeData;
      //   this.showTree = true;
      // });
    },
    //禁用树节点
    setDisabledNode(node) {
      for (let item of node) {
        if (item.id == this.currentNode.id) {
          item.disabled = true;
        }
        if (this.currentNode.floor) {
          if (item.floor > this.currentNode.floor) {
            item.disabled = true;
          }
        }
        //遍历子节点
        if (item.children && item.children.length) {
          this.setDisabledNode(item.children);
        }
      }
    },
    doClose() {
      this.showDialong = false;
    },
    doSave() {
      let list = this.$refs.equipTree.getCheckedNodes();
      let node = {};
      list.map(i => {
        if (i.id != this.currentNode.id) {
          node = i;
        }
      });
      let { id, sort } = node;
      let form = {
        parentId: id,
        id: this.currentNode.id,
        name: this.currentNode.name
      };
      switch (this.location) {
        //上方
        case "1":
          form.sort = sort - 1;
          break;
        //下方
        case "-1":
          form.sort = sort + 1;
          break;
      }
      this.$emit("changeSelete", form);
      this.doClose();
    }
  }
};
</script>

<style lang='less'>
.moveNodeSelecet {
  .el-dialog .el-dialog__body {
    height: 600px;
    min-height: 600px;
  }
  .topSelect {
    height: 35px;
    display: flex;
    flex-flow: wrap nowrap;
    .topLabel {
      width: 175px;
      line-height: 35px;
    }
    .el-input__inner {
      height: 35px;
      line-height: 35px;
    }
  }
}
.treeDiv {
  height: 500px;
}
</style>